'use strict';
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import Theme from '../../config/themes/Theme';

class MineHintView extends React.PureComponent {


    static propTypes = {
        ...View.propTypes,
        data: PropTypes.array,
        numberStyle: Text.propTypes.style,
        textStyle: Text.propTypes.style,

    };

    static defaultProps = {
        ...View.defaultProps,
        numberStyle: Text.propTypes.style,
        textStyle: Text.propTypes.style,
    };

    constructor(props) {
        super(props);
    }

    render() {
        const {numberStyle, textStyle, lineStyle, data, onPressItem} = this.props;
        // console.log('mineHeaderContent---->', data);
        return (
            <View style={styles.container}>
                {data.map((item, index) => {
                    return (
                        <View key={`${index}`} style={styles.item}>
                            {index % 2 === 0 ? <TouchableOpacity style={styles.item} onPress={()=>{onPressItem(item.key)}}>
                                <View style={[styles.textContent]} >
                                    <Text style={[styles.number, numberStyle]}>{item.number || 0}</Text>
                                    <Text style={[styles.number, textStyle]}>{item.text}</Text>
                                </View>
                            </TouchableOpacity> : <View style={[styles.line, lineStyle]} />}
                        </View>

                    )
                })}
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: 38,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'transparent',
        justifyContent: 'space-evenly',
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    textContent: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    number: {
        color: '#fff',
        fontSize: FontSize(15)
    },
    hint: {
        color: '#fff',
        fontSize: FontSize(10)
    },
    line: {
        backgroundColor: '#fff',
        width: 5,
        height: 31,
    }
});

export default MineHintView